<template>
    <div id="personalMsg" @click="refreshShow()">
        <div id="container">
            <i class="el-icon-close" @click.stop="$emit('closePersonalMsg')"></i>
            <div id="bground">
                <img  :src="userMsg.img">
                <input id="updateImg" type="file" multiple @change="updateFile($event)" accept="image/*" style="display: none">
            </div>
            <img id="headimg" :src="userMsg.img" @click="clickImg">
            <div id="msg">
            <p>
                <input v-if="show.nicknameInput" @click.stop @blur="refreshShow('update')" type="text" v-model="sendUserMsg.nickname" placeholder="请输入新的用户名">
                <span v-if="!show.nicknameInput">{{userMsg.nickname}}<i @click.stop="refreshShow('nickname')" class="el-icon-edit-outline"></i></span>
            </p>
            <p v-if="userMsg.isverify===0" @click="goIdRecognition">实名认证</p>
            <p v-if="userMsg.isverify===1" style="cursor: default;color: rgba(128,128,128,0.58)">已认证</p>
            <p v-if="userMsg.isverify===2" style="cursor: default;color: rgba(128,128,128,0.58)">审核中</p>
            <p>性别：
                <input v-if="show.sexInput" type="text" @blur="refreshShow('update')" v-model="sendUserMsg.sex" @click.stop placeholder="输入男/女">
                <span v-if="!show.sexInput">{{userMsg.sex===1?'男':'女'}}<i @click.stop="refreshShow('sexInput')" class="el-icon-edit-outline"></i></span></p>
            <p>联系电话：
                <input v-if="show.telInput" type="text" @blur="refreshShow('update')" v-model="sendUserMsg.tel" @click.stop placeholder="更改联系电话">
                <span v-if="!show.telInput">{{userMsg.contact_tel}}<i @click.stop="refreshShow('telInput')" class="el-icon-edit-outline"></i></span>
            </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "personalMsg",
        data(){
            return {
                show:{
                    nicknameInput:false,
                    sexInput:false,
                    telInput:false
                },
                sendUserMsg:{
                token:'',   //用户凭证
                nickname:'', //可空` 用户昵称
                tel:'' //可空 电话
                },
                userMsg:{}
            }
        },
        methods:{
            refreshShow(item){
                this.show={
                nicknameInput:false,
                sexInput:false,
                telInput:false
                };
                switch (item) {
                    case 'nickname':this.show.nicknameInput=true;break;
                    case 'sexInput':this.show.sexInput=true;break;
                    case 'telInput':this.show.telInput=true;break;
                    case 'update':{
                        let reg=/(^| )login_token=([^;]*)(;|$)/;
                        let token = document.cookie.match(reg);
                        let data={};
                        data.token=token[2];
                        if(this.sendUserMsg.nickname){
                            data.nickname=this.sendUserMsg.nickname;
                        }
                        let Reg = /^1(3|4|5|7|8)[0-9]{9}$/;
                        if(this.sendUserMsg.tel){
                            if(Reg.test(this.sendUserMsg.tel))  {
                                data.contact_tel=this.sendUserMsg.tel;
                            }else{
                                alert("请输入正确的手机号码");
                            }
                        }

                        data.sex = this.sendUserMsg.sex==='男'?1:2;
                        this.$axios.post(this.Global.api+'/index.php/index/userInfoUpdate',this.$qs.stringify(data),{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                                if(res.status>=200&&res.status<300&&res.data.res===0){
                                  this.refreshUser();
                                    this.sendUserMsg={
                                        token:'',   //用户凭证
                                        nickname:'', //可空` 用户昵称
                                        tel:'' //可空 电话
                                    };
                                }
                            }
                        );
                        break;
                    }
                    default:break;
                }

            },
            refreshUser(){
                let reg=/(^| )login_token=([^;]*)(;|$)/;
                let token = document.cookie.match(reg);
                this.$axios.post(this.Global.api+'/index.php/index/userInfo',this.$qs.stringify({token:token[2]}),{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                        if(res.status>=200&&res.status<300&&res.data.res===0){
                            this.userMsg=res.data.data;
                        }
                    }
                )
            },
            clickImg(){
                document.getElementById('updateImg').click();
            },
            updateFile(e){
                // console.log(e.target.files)
                let reg=/(^| )login_token=([^;]*)(;|$)/;
                let token = document.cookie.match(reg);
                let file = e.target.files[0];//真正上传的文件；
                if(file.name.length > 50){
                    alert("图片名应在50个字符以内");
                    return;
                }
                if(file.size > 5242880){
                    alert("图片大小不能超过5M");
                    return;
                }

                let data = new FormData();
                data.append('token',token[2]);
                data.append('img',file);
                this.$axios.post(this.Global.api+'/index.php/index/uploadFile',data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                        if(res.status>=200&&res.status<300){
                            this.refreshUser();
                        }
                    }
                )

            },
            goIdRecognition(){
                this.$router.push('./id-recognition');
            }
        },
        created(){
            this.refreshUser();
        }
    }
</script>

<style scoped>
    #personalMsg{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        z-index: 1;
        top: 0;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.1);
    }
    #container{
        position: relative;
        width: 300px;
        height: 260px;
        background-color: white;
    }
    #container .el-icon-close{
        position: absolute;
        z-index: 3;
        right: 2px;
        top: 1px;
        cursor: pointer;
        font-size: 1.5em;
        color: rgba(128, 128, 128, 0.66);
    }
   #bground{
       width: 100%;
       height: 120px;
       /*background: url("../assets/img/默认头像.png") no-repeat;*/
       overflow: hidden;
       background-size:300px 300px;
       background-position:center;
       filter: blur(3px);
   }
   #bground img{
       width: 100%;
       position: relative;
       top:-75px;
   }
     #headimg{
         box-sizing: content-box;
        position: absolute;
        /*top: -35px;*/
         right: 115px;
         top: 85px;
         width: 70px;
         height: 70px;
         cursor: pointer;
        box-shadow: 0 0 5px 2px white;
    }
    #msg{
        position: absolute;
        top: 155px;
        width: 100%;
        font-size: 0.9em;
    }
    #msg p{
        width: 100%;
        margin: 5px 0;
        color: rgba(0, 0, 0, 0.62);
        text-align: center;
    }
    #msg p input{
        padding: 1px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.7);
        width: 100px;
        border:1px solid rgba(177, 177, 177, 0.7);
    }
    #msg p i{
        font-size: 15px;
        cursor: pointer;
    }
    #msg p:nth-child(1),#msg p:nth-child(2){
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #msg p:nth-child(1){
        font-size: 1.2em;
        color: rgba(0, 0, 0, 0.71);
    }
    #msg p:nth-child(2){
        color: #ff0a60;
        font-size: 0.99em;
        cursor: pointer;
    }
    #msg p:nth-child(2):hover{
        text-decoration: underline;
    }
</style>